<template>
  <div>
    <common-head title="个人中心"></common-head>
    <div class="wrap">
      <div class="header">
        <h2>Hi,欢迎来到订花乐！</h2>
        <div class="btn">
          <p>欢迎您，何憨憨憨！</p>
        </div>
      </div>
      <div class="myOrder">
        <div class="myOrder-up">
          <p>我的订单</p>
          <p>全部订单<van-icon name="arrow" /></p>
        </div>
        <ul class="myOrder-down">
          <li>
            <div>
              <van-icon class-prefix="icon" name="payment" size="25"></van-icon>
            </div>
            <div>待付款</div>
          </li>
          <li>
            <div>
              <van-icon class-prefix="icon" name="peisongzhong" size="25"></van-icon>
            </div>
            <div>派送中</div>
          </li>
          <li>
            <div>
              <van-icon class-prefix="icon" name="daipingjia" size="25"></van-icon>
            </div>
            <div>待评价</div>
          </li>
          <li>
            <div>
              <van-icon class-prefix="icon" name="yiwancheng" size="25"></van-icon>
            </div>
            <div>已完成</div>
          </li>
        </ul>
      </div>
      <div class="content">
        <van-cell-group>
          <van-cell title="优惠券" is-link icon-prefix="icon" icon="youhuiquan"  size="25" />
          <van-cell title="收货地址" is-link icon-prefix="icon" icon="dizhi" size="25" />
          <van-cell title="设置" is-link icon-prefix="icon" icon="shezhi1"  size="25"/>
        </van-cell-group>
      </div>
    </div>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import CommonHead from '@components/CommonHead'
export default {
  components: {
    Tabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 50px;
  background-color: #fff;
  .header{
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F12148008023%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627822115&t=4b0482d8647131457f661974815645f4');align-items: center;
      h2{
        margin: 0 0 5px;
        color: #fff;
        font-size: 14px;
      }
      .btn{
        margin: 10px 0 0;
        padding: 8px 0;
        .van-button--normal{
          padding: 0 30px;
        }
      }
  }
  .myOrder{
    padding: 20px 0;
    .myOrder-up{
      display: flex;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid #ccc;
    }
    .myOrder-down{
      display: flex;
      justify-content: space-around;
      padding: 20px;
      li{
        text-align: center;
      }
    }
  }
}
</style>
